<template>
  <view class="take-photo">
    <view class="camera-container" v-if="!tempImagePath">
      <camera
        device-position="back"
        flash="auto"
        @error="handleError"
        class="camera"
      ></camera>
      <view class="take-photo-btn" @click="handleTakePhoto">
        <view class="inner-circle"></view>
      </view>
    </view>

    <view class="preview-container" v-else>
      <image :src="tempImagePath" mode="aspectFit" class="preview-image"></image>
      <view class="button-group">
        <view class="btn retry-btn" @click="handleRetry">重拍</view>
        <view class="btn confirm-btn" @click="handleConfirm">确认使用</view>
      </view>
    </view>

    <view class="loading-mask" v-if="isProcessing">
      <view class="loading-content">
        <text>正在处理图片...</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tempImagePath = ref('')
const isProcessing = ref(false)

// 处理拍照
const handleTakePhoto = () => {
  const camera = uni.createCameraContext()
  camera.takePhoto({
    quality: 'high',
    success: (res) => {
      tempImagePath.value = res.tempImagePath
    },
    fail: (error) => {
      uni.showToast({
        title: '拍照失败',
        icon: 'none'
      })
      console.error('拍照失败:', error)
    }
  })
}

// 处理拍照错误
const handleError = (error: any) => {
  uni.showToast({
    title: '相机调用失败',
    icon: 'none'
  })
  console.error('相机错误:', error)
}

// 重新拍照
const handleRetry = () => {
  tempImagePath.value = ''
}

// 确认使用照片
const handleConfirm = async () => {
  isProcessing.value = true
  try {
    // 这里调用AI服务去除背景
    // 示例使用 remove.bg API，你需要替换为实际的API
    const processedImagePath = await removeBackground(tempImagePath.value)
    
    // 跳转到更新衣物页面
    uni.navigateTo({
      url: `/pages/update_clothes/update_clothes?imageUrl=${encodeURIComponent(processedImagePath)}`
    })
  } catch (error) {
    uni.showToast({
      title: '图片处理失败',
      icon: 'none'
    })
    console.error('处理失败:', error)
  } finally {
    isProcessing.value = false
  }
}

// 移除背景的函数
const removeBackground = async (imagePath: string): Promise<string> => {
  // 这里需要实现调用AI服务去除背景的逻辑
  // 可以使用 remove.bg API 或其他AI服务
  // 返回处理后的图片路径
  return new Promise((resolve, reject) => {
    // 示例：上传图片到服务器并处理
    uni.uploadFile({
      url: 'YOUR_API_ENDPOINT', // 替换为实际的API端点
      filePath: imagePath,
      name: 'image',
      header: {
        'X-Api-Key': 'YOUR_API_KEY' // 替换为实际的API密钥
      },
      success: (uploadRes) => {
        // 这里应该返回处理后的图片URL
        const processedImageUrl = JSON.parse(uploadRes.data).url
        resolve(processedImageUrl)
      },
      fail: reject
    })
  })
}
</script>

<style lang="scss" scoped>
.take-photo {
  width: 100%;
  height: 100vh;
  background-color: #000;
  position: relative;

  .camera-container {
    width: 100%;
    height: 100%;
    position: relative;

    .camera {
      width: 100%;
      height: 100%;
    }

    .take-photo-btn {
      position: absolute;
      bottom: 50rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;

      .inner-circle {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }

  .preview-container {
    width: 100%;
    height: 100%;
    position: relative;

    .preview-image {
      width: 100%;
      height: 100%;
    }

    .button-group {
      position: absolute;
      bottom: 50rpx;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 40rpx;

      .btn {
        padding: 20rpx 60rpx;
        border-radius: 40rpx;
        font-size: 32rpx;
        color: #fff;

        &.retry-btn {
          background-color: #666;
        }

        &.confirm-btn {
          background-color: $uni-color-primary;
        }
      }
    }
  }

  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;

    .loading-content {
      background-color: rgba(255, 255, 255, 0.9);
      padding: 40rpx;
      border-radius: 20rpx;
      text-align: center;

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style> 